<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6" :offset="4">
          <el-switch
              v-model="cs"
              size="large"
              active-text="卡片浏览"
              inactive-text="列表浏览"
              :active-action-icon="Menu"
              :inactive-action-icon="Expand"
              style="--el-switch-on-color: rgb(0, 136, 255);--el-switch-off-color:rgb(0, 136, 255);"
          />
      </el-col>
      <el-col :span="4" :offset="0">
          <el-select v-model="publishUnit" placeholder="请选择" style="">
              <template #prefix>
                  发布单位：
              </template>
              <el-option v-for="publish_unit,index in publishUnitList":key="index" :label="publish_unit.departmentName" :value="publish_unit.departmentId" />
          </el-select>
      </el-col>
      <el-col :span="4" :offset="0">
          <el-input
          v-model="title"
          style="width: 300px"
          placeholder="搜索"
          >
              <template #append>
                  <el-button @click="reset">重置</el-button>
                  <el-button @click="select">查询</el-button>
              </template>
          </el-input>
      </el-col>
    </el-row>
    <div>
      <div v-if="tableData.length>0" class="your-scroll-container">
        <el-card
        v-for="(table, index) in tableData"
        :key="index"
        :class="`${cs ? 'dv1' : ''} dv`"
        >
        <router-link :to="{ path: '/home/details', query: { id:table.id }}">
            <div class="card-content">
                <h2 class="title">{{ table.title }}</h2>
                <p class="introduction">{{ table.introduction }}</p>
                <div class="meta-info">
                    <div class="publish-date">发布时间：{{ table.publishDate }}</div>
                    <div class="publisher-details">
                        <p class="publish-unit">发布单位：{{ table.publishUnitName }}</p>
                        <p class="publisher-name">发布人：{{ table.publisherName }}</p>
                    </div>
                </div>
            </div>
        </router-link>
        </el-card>
      </div>
      <div v-else style="display: flex;justify-content: center;">
        <el-empty :image-size="200" />
      </div>
    </div>

  </div>
</template>
  
  <script setup>
  import { selectAnctBy } from '@/api/announcemt';
    import { selectAllDep } from '@/api/department';
    import { Menu, Expand } from '@element-plus/icons-vue'
    import { ref, onMounted } from 'vue';
    const cs=ref(false)
    const title=ref('')
    const publishUnit=ref('')
    const publishUnitList=ref([])
    const tableData=ref([])
    //重置
    const reset=()=>{
        title.value='';
        publishUnit.value='';
    }
    //查询
    const select=(async()=>{
        let response={}
        response=await selectAnctBy(title.value,0,publishUnit.value,0,true);
        tableData.value= response.data.data
    })
  // 生命周期钩子 
    onMounted(async() => {
        const response = await selectAllDep();
        publishUnitList.value = response.data.data;
        select()
    });
  </script>
  
<style scoped>
a{
  color: black ;
  text-decoration:none ;
}
.card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title {
  margin: 0;
  padding-left: 20px;
}

.introduction {
  margin: 8px 0;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.publisher-details {
  text-align: right;
}

.publish-unit,
.publisher-name {
  margin: 4px 0;
}

    .dv1{
        display: inline-block;
        width: 47%;
    }
    .dv{
        box-sizing: border-box;
        margin: 10px;
        padding: 10px;
        height: 190px;
    }
  </style>